<template>
  <div>
    <button class="my_button" :disabled="this.disable" :class="[button_type]" @click="click" v-html="button_value">
    </button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data() {
    return {
      button_type: "Operator"
    }
  },
  methods: {
    click() {
      this.$emit('clickButton', this.button_value, this.button_type);
    }
  },
  mounted() {
    // 按钮的类型，默认为 Operator , 其他为 Number 和 Equal 、 Remove
    if (typeof this.button_value === "number") {
       this.button_type = "Number";
    } else if (typeof this.button_value === 'string') {
      if (this.button_value === '=') {
        this.button_type = "Equal";
      }
      if (this.button_value === 'AC') {
        this.button_type = "Remove";
      }
      if (this.button_value === '.'){
        this.button_type = "Number";
      }
    }

  },
  props: {
    button_value: {
      request: true,
      type: [String,Number],
    },
    disable:{
      default: false,
      type: Boolean,
    }
  }
}
</script>

<style scoped>
.my_button {
  user-select: none;
  width: 50px;
  height: 40px;
  /*display: block;*/
  margin: 5px 8px;
  border: none;
  outline: none;
  font-size: 20px;
  /*font-weight: bold;*/
  line-height: 40px;
  text-align: center;
  background-color: rgb(207, 210, 224);
  border-radius: 8px;
  box-shadow: 2px 1px 1px #bbbbbb;
}

.my_button:hover {
  background-color: rgb(223, 224, 229);
}

.my_button:active {
  box-shadow: 0 0 0;
  color: #bbbbbb;
}

/* 数字类型 */
.Number {
  background-color: #ffffff;
}

/* 等于符号 */
.Equal {
  background-color: rgb(74, 104, 226);
  color: #ffffff;
}

/* 清除 */
.Remove {
  background-color: rgb(255, 189, 69);
  color: #ffffff;
}
</style>